<!--
  ~ Copyright (C) 2015 The Android Open Source Project
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<!doctype html>
<html>
<head>
    <title>Hello Espresso Web</title>

    <meta charset="utf-8"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style type="text/css">
        body {
        background-color: #f0f0f2;
        margin: 0;
        padding: 0;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        div {
        width: 600px;
        margin: 5em auto;
        padding: 50px;
        background-color: #fff;
        border-radius: 1em;
        }
        #message {
        margin: 0 auto 12px auto;
        }
        a:link, a:visited {
        color: #38488f;
        text-decoration: none;
        }
        @media (max-width: 700px) {
        body {
        background-color: #fff;
        }
        div {
        width: auto;
        margin: 0 auto;
        border-radius: 0;
        padding: 1em;
        }
        }
    </style>
</head>
<body>
<div>
    <h1>Hello Espresso Web!</h1>

    <form action="web_form_response.html" method="GET">
        <p id="message">Need some Espresso</p>
        <input type="text" name="text_input" id="text_input" placeholder="type something"/><br>
        <input type="button" value="Change Text" onclick="changeText()" id="changeTextBtn"/><br>
        <input type="submit" value="Change Text And Submit" id="submitBtn"/><br>
    </form>
</div>
<script>
    function changeText() {
        var typedText = document.getElementById('text_input').value;
        document.getElementById('message').innerHTML=typedText;
    }
</script>
</body>
</html>

